<template>
	<div class="example">
		<el-tabs v-model="activeName">
			<el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
				<el-row class="content" :gutter="30" justify="space-around">
					<el-col :span="4" v-for="it in data" :key="it.id">
						<el-card shadow="hover">
							<div slot="header">
								<h4>{{ it.title }}</h4>
							</div>
							<el-image :src="it.src" :alt="it.alt"></el-image>
						</el-card>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const tabs = [
	{ label: '全部', name: 'all' },
	{ label: '北欧', name: 'europe' },
	{ label: '日式', name: 'japan' },
	{ label: '美式', name: 'american' },
	{ label: '中式', name: 'china' },
	{ label: '现代', name: 'modern' },
	{ label: '复古', name: 'retro' },
]
const first = tabs
	.filter((item, index) => {
		return index == 0
	})[0]
  const activeName = ref(first?.name)
const data = [

	{ id: '1', title: '135现代混搭风格', src: '', alt: '' },
	{ id: '2',  title: '120新中式暖色调',src: '', alt: '' },
	{ id: '3',  title: '120独居女性',src: '', alt: '' },
	{ id: '4',  title: '121现代+日系风',src: '', alt: '' },
	{ id: '5',  title: '屋主赠给儿子的新房',src: '', alt: '' },
	{ id: '6', title: '240简约实景', src: '', alt: '' },
  { id: '7', title: '135现代混搭风格', src: '', alt: '' },
  { id: '8',  title: '120新中式暖色调',src: '', alt: '' },
  { id: '9',  title: '120独居女性',src: '', alt: '' },
  { id: '10',  title: '121现代+日系风',src: '', alt: '' },
  { id: '11',  title: '屋主赠给儿子的新房',src: '', alt: '' },
  { id: '12', title: '240简约实景', src: '', alt: '' },
  { id: '13', title: '135现代混搭风格', src: '', alt: '' },
  { id: '14',  title: '120新中式暖色调',src: '', alt: '' },
  { id: '15',  title: '120独居女性',src: '', alt: '' },
  { id: '16',  title: '121现代+日系风',src: '', alt: '' },
  { id: '17',  title: '屋主赠给儿子的新房',src: '', alt: '' },
  { id: '18', title: '240简约实景', src: '', alt: '' },
  { id: '19', title: '135现代混搭风格', src: '', alt: '' },
  { id: '20',  title: '120新中式暖色调',src: '', alt: '' },
  { id: '21',  title: '120独居女性',src: '', alt: '' },
  { id: '22',  title: '121现代+日系风',src: '', alt: '' },
  { id: '23',  title: '屋主赠给儿子的新房',src: '', alt: '' },
  { id: '24', title: '240简约实景', src: '', alt: '' },
  { id: '25', title: '135现代混搭风格', src: '', alt: '' },
  { id: '26',  title: '120新中式暖色调',src: '', alt: '' },
  { id: '27',  title: '120独居女性',src: '', alt: '' },
  { id: '28',  title: '121现代+日系风',src: '', alt: '' },
  { id: '29',  title: '屋主赠给儿子的新房',src: '', alt: '' },
  { id: '30', title: '240简约实景', src: '', alt: '' },
  { id: '31', title: '135现代混搭风格', src: '', alt: '' },
  { id: '32',  title: '120新中式暖色调',src: '', alt: '' },
  { id: '33',  title: '120独居女性',src: '', alt: '' },
  { id: '34',  title: '121现代+日系风',src: '', alt: '' },
  { id: '35',  title: '屋主赠给儿子的新房',src: '', alt: '' },
  { id: '36', title: '240简约实景', src: '', alt: '' },
]
</script>
<style scoped>
.example {
	display: flex;
	justify-content: center;
}
.content{
  padding: 30px 100px;
}
.example :deep(
.el-tabs__header
){
  display: flex;
  justify-content: center;
}
.example :deep(
.el-tabs__nav-wrap::after
){
  position: relative;
  width: auto;
}
</style>